<template>
  <div>
    <img
      style="width: 40px; height: 40px"
      :src="url"
      alt=""
      :width="width"
      :height="height"
      ref="myImageRef"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 用户头像
const userImg = JSON.parse(localStorage.getItem('result') as string).headPic
// 使用defineProps定义组件接收的属性
const props = defineProps({
  src: String,
  width: null,
  height: null
})
// url是一个响应式变量，初始值为一个默认的图片地址
const url: any = ref(
  'https://img1.baidu.com/it/u=2446404097,1499471028&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
)
// myImageRef是一个响应式引用，用于在模板中引用<img>元素，以便在组件挂载后进行操作
const myImageRef:any = ref(null)
const loadItems = () => {
  // 创建一个新的Image对象，设置其src属性为传入的props.src，即组件接收的图片地址
  const image: any = new Image()
  image.src = props.src
  // 为这个Image对象添加load事件监听器，当图片加载成功时，更新url变量为传入的图片地址，从而触发视图更新，显示加载成功的图片
  image.addEventListener('load', () => {
    url.value = props.src
  })
  // 为Image对象添加error事件监听器，当图片加载失败时，更新url变量为从本地存储中获取的用户头像地址（userImg），以显示备用图片
  image.addEventListener('error', () => {
    url.value =userImg
  })
}
onMounted(() => {
  // IntersectionObserver来观察图片元素是否进入可视区域，并在合适的时候加载图片
  const intersectionObserver = new IntersectionObserver((entries) => {
    if (entries[0].intersectionRatio <= 0) return
    // 当元素进入可视区域时，调用loadItems函数开始加载图片
    loadItems()
  })
  // 使用observe方法将myImageRef.value（即<img>元素）作为目标进行观察
  intersectionObserver.observe(myImageRef.value)
})
</script>





